<!DOCTYPE html>
<html lang="zh_cn">
  <head>
    <meta charset="UTF-8" />
    <title>石头剪刀布</title>
    <script>
      const dict = {'jd': 'st', 'st': 'b', 'b': 'jd'};
    </script>

    <style>
      :root {
        --div1-height:200px;
      }

      html,
      body {
        background-color: black;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      h2{
        color: white;
      }
      .player{
        width: var(--div1-height);
        height: var(--div1-height);
        display: grid;
        place-items: center;
      }
      .image-div{
        height: 150px;
        width: 150px;
        display: flex;
        justify-content: stretch;
        align-content: stretch;
        background-color: white;
      }
      .animation{
        animation: changeImage 0.5s infinite
      }
      @keyframes changeImage {
        0%   { content: url('jd.png'); }
        33.33% { content: url('st.png'); }
        66.66% { content: url('b.png'); }
        100% { content: url('jd.png'); }
      }
    </style>
  </head>
  <body>
  <div style="width: 80%;height: 500px;">

    <div style="width: 100%;height: var(--div1-height);display: flex;justify-content: space-between;">

      <div class="player">
        <h2>玩家</h2>
        <div class="image-div" style="background-color: white">
          <img src="" id="player-img">
        </div>
      </div>

      <div class="player">
        <h2>电脑</h2>
        <div class="image-div">
          <img src="" id="ai-img">
        </div>
      </div>

    </div>

    <div style="height: 150px;width: 80%; margin-left:10%; margin-top: 10%; display: flex; justify-content: space-evenly;">
      <script>
        const player_img = document.getElementById('player-img');
        const ai_img = document.getElementById('ai-img');
        async function imgOnDown(str) {
          player_img.src = str + '.png';

          const aiSrc = dict[str] + '.png';
          ai_img.classList.add('animation');
          await new Promise(resolve => setTimeout(resolve, 1000));
          ai_img.classList.remove('animation');
          ai_img.before()
          ai_img.src = aiSrc;
        }
      </script>
      <img src="jd.png" onclick="imgOnDown('jd')">
      <img src="st.png" onclick="imgOnDown('st')">
      <img src="b.png" onclick="imgOnDown('b')">
    </div>

  </div>
  </body>
</html>
